<template>
	<view>
		<u-sticky :enable="enable">
			<view class="steps">
				<u-steps :list="numList" :current="current" mode="number" active-color="white" un-active-color="white">
				</u-steps>
			</view>
		</u-sticky>
		<view style="padding-bottom: 50px;">
			<u-card border-radius="8" padding="20" sub-title-size="28" :border="false" margin="0">
				<view slot="head" style="font-weight:bold;">
					<u-icon name="question-circle" size="32" margin-left="30" label-pos="left"
						label="商品Banner图片(首张用于商品封面)" color="#999" @click="show = true"></u-icon>
				</view>
				<view slot="body">
					<shmily-drag-image :fileList="fileList" :action="action" name="image" :header="header"
						:form-data="uploadData" @update="update"></shmily-drag-image>
				</view>
			</u-card>
			<u-gap height="10" bg-color="#f2f2f2"></u-gap>
			<u-card border-radius="8" padding="20" sub-title-size="28" :border="false" margin="0">
				<view slot="head"
					style="font-weight:bold;display: flex;align-items: center;justify-content: space-between;">
					<u-icon name="question-circle" size="32" margin-left="30" label-pos="left" label="商品详情图"
						color="#999" @click="show = true"></u-icon>
					<view style="color: #1F6ECF;" @click="addDetailImage">{{detail?'编辑':'添加'}}
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view slot="body">
					<view v-show="!detail">暂无详情</view>
					<u-parse v-show="detail" :html="detail"></u-parse>
				</view>
			</u-card>
			<view class="btnSum">
				<u-button type="primary" class="loginBtn" @click="submit()">保存</u-button>
			</view>
		</view>
		<u-mask :show="show" :mask-click-able="false">
			<view class="warp">
				<view class="rect">
					<view class="notice-header"></view>
					<view class="notice-content">
						<view class="notice-title">
							<view class="notice-title-list">1、图片必须清晰；</view>
							<view class="notice-title-list"> 2、图片尺寸必须为720*720 PX; </view>
							<view class="notice-title-list">3、主图上传的数量必须为 4至6张； </view>
							<view class="notice-title-list">4、图片的质量必须达到标准（ 可参照淘宝天猫的商 品主图，不能直接用自己拍照后没经修饰的图片 ）以
								上任何一条要求没达到，便会审核不通过。</view>
						</view>
					</view>
					<view class="notice-footer">
						<u-button shape="circle" type="primary" class="noticeBtn" @click="show = false">我已了解</u-button>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import shmilyDragImage from '@/components/shmily-drag-image/shmily-drag-image.vue'
	import api from '@/common/uploadApi'
	export default {
		data() {
			return {
				current: 1,
				enable: true,
				numList: [{
					name: '基本信息'
				}, {
					name: '商品图片'
				}, {
					name: '商品参数'
				}, {
					name: '规格库存'
				}],
				show: false,
				action: api.imageApi,
				header: {
					"Authorization": 'Bearer ' + uni.getStorageSync('token')
				},
				uploadData: {
					media_type: 1,
					product_id: ''
				},
				fileList: [],
				detail: ''
			}
		},
		components: {
			shmilyDragImage
		},
		onShow() {
			this.enable = true;
		},
		onHide() {
			this.enable = false;
		},
		onLoad(option) {
			this.uploadData.product_id = option.product_id;
			this.getGoodsDetail();
		},
		methods: {
			getGoodsDetail() {
				this.$u.api.goodsDetails({
					id: this.uploadData.product_id
				}).then(res => {
					if (res.code == 0) {
						this.fileList = res.data.mediaMains;
						this.detail = res.data.details;
					}
				})
			},
			addDetailImage() {
				uni.navigateTo({
					url: '/pages/line/shoping/addDetailImage?id=' + this.uploadData.product_id
				})
			},
			update(list) {
				this.$u.api.mediaSort(list);
			},
			submit() {
				uni.navigateTo({
					url: '/pages/line/shoping/parameters?id='+ this.uploadData.product_id,
					animationType: "slide-in-right"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.steps {
		background-color: #357cd4;
		padding: 30rpx;
	}

	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.rect {
			background: #FFFFFF;
			box-shadow: 2rpx 6rpx 51rpx 0px rgba(55, 127, 166, 0.3);
			border-radius: 20rpx;
			width: 90%;

			.notice-header {
				width: 100%;
				height: 259rpx;
				background-image: url(@/static/home/noticeDetailBg.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;

			}

			.notice-content {
				padding: 0 30rpx;

				.notice-title {
					font-size: 26rpx;
					font-weight: 500;
					color: #357CD4;
					text-align: center;
					margin-bottom: 35rpx;

					.notice-title-list {
						text-align: left;
						margin-top: 20rpx;
						line-height: 2;
					}
				}
			}

			.notice-footer {
				padding: 30rpx;

				.noticeBtn {
					background: #1F6ECF;
					box-shadow: 0px 12rpx 16rpx 0px rgba(28, 100, 224, 0.32);
					border-radius: 37rpx;
					font-size: 28rpx;
				}
			}
		}

	}

	.btnSum {
		height: 50px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		border-top: 1px solid #f2f2f2;
		display: flex;
		align-items: center;
		.loginBtn{
			width: 606rpx;
			background-color: #1F6ECF;
			border-radius: 43rpx;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 32rpx;
			box-shadow: 0px 12px 16px 0px rgba(28, 100, 224, 0.32);
		}
	}
</style>
